<template>
  <div class="bigbox">
    <!-- <h1>我是首页</h1> -->
    <div class="leftbox">
      <div class="leftbox1">
        <div class="left-top">
          <div class="tou">
            <img src="../img/bd4b7392c3fdc762f3a68ec0039f91c.jpg" alt="" />
          </div>
          <div class="ma">
            <div>
              <h2>蓝桉Sir</h2>
              <p>超级管理员</p>
            </div>
            <el-button :plain="true" @click="open2">退出登录</el-button>
          </div>
        </div>
        <hr />
        <div class="left-b">
          <p>
            上次登录时间：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
            &nbsp; 22-4-12
          </p>
          <p>
            上次登录地方：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;
            &nbsp; 眉山
          </p>
        </div>
      </div>
      <div class="leftbox2">
        <el-table :data="tableData" height="800" border style="width: 100%">
          <el-table-column prop="name" label="手机"> </el-table-column>
          <el-table-column prop="num1" label="今日购买"> </el-table-column>
          <el-table-column prop="num2" label="本月购买"> </el-table-column>
          <el-table-column prop="num" label="总购买"> </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="rightbox">
      <div class="rightbox1">
        <div class="minbox">
          <div class="i"><i class="el-icon-success"></i></div>
          <div class="s">
            <div class="f">￥122</div>
            <div>今日支付订单</div>
          </div>
        </div>
        <div class="minbox">
          <div class="i2"><i class="el-icon-star-on"></i></div>
          <div class="s">
            <div class="f">￥21</div>
            <div>今日收藏订单</div>
          </div>
        </div>
        <div class="minbox">
          <div class="i3"><i class="el-icon-s-goods"></i></div>
          <div class="s">
            <div class="f">￥ 13</div>
            <div>今日未支付订单</div>
          </div>
        </div>
        <div class="minbox">
          <div class="i"><i class="el-icon-success"></i></div>
          <div class="s">
            <div class="f">￥3834</div>
            <div>本月支付订单</div>
          </div>
        </div>
        <div class="minbox">
          <div class="i2"><i class="el-icon-star-on"></i></div>
          <div class="s">
            <div class="f">￥660</div>
            <div>本月收藏订单</div>
          </div>
        </div>
        <div class="minbox">
          <div class="i3"><i class="el-icon-s-goods"></i></div>
          <div class="s">
            <div class="f">￥120</div>
            <div>本月未支付订单</div>
          </div>
        </div>
      </div>
      <div class="rightbox2">
        <!-- <router-view></router-view> -->
        <!-- 折线图 -->
        <div id="lineChart"></div>
      </div>
      <div class="rightbox3">
        <!-- 柱状图 饼图 -->
        <div class="barChart_pieChart-box">
          <div id="barChart"></div>
          <div>
            <div id="pieChart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Echarts",
  data() {
    return {
      tableData: [
        {
          name: "小米",
          num1: "50",
          num2: "1300",
          num: " 50000",
        },
        {
          name: "华为",
          num1: "80",
          num2: "500",
          num: " 3200",
        },
        {
          name: "苹果",
          num1: "1",
          num2: "10",
          num: " 20",
        },
        {
          name: "红米",
          num1: "1000",
          num2: "5000",
          num: " 8000000",
        },
        {
          name: "小米",
          num1: "50",
          num2: "1300",
          num: " 50000",
        },
        {
          name: "华为",
          num1: "80",
          num2: "500",
          num: " 3200",
        },
        {
          name: "苹果",
          num1: "1",
          num2: "10",
          num: " 20",
        },
        {
          name: "红米",
          num1: "1000",
          num2: "5000",
          num: " 8000000",
        },
        {
          name: "小米",
          num1: "50",
          num2: "1300",
          num: " 50000",
        },
        {
          name: "华为",
          num1: "80",
          num2: "500",
          num: " 3200",
        },
        {
          name: "苹果",
          num1: "1",
          num2: "10",
          num: " 20",
        },
        {
          name: "红米",
          num1: "1000",
          num2: "5000",
          num: " 8000000",
        },
        {
          name: "小米",
          num1: "50",
          num2: "1300",
          num: " 50000",
        },
        {
          name: "华为",
          num1: "80",
          num2: "500",
          num: " 3200",
        },
        {
          name: "苹果",
          num1: "1",
          num2: "10",
          num: " 20",
        },
        {
          name: "红米",
          num1: "1000",
          num2: "5000",
          num: " 8000000",
        },
        {
          name: "小米",
          num1: "50",
          num2: "1300",
          num: " 50000",
        },
        {
          name: "华为",
          num1: "80",
          num2: "500",
          num: " 3200",
        },
        {
          name: "苹果",
          num1: "1",
          num2: "10",
          num: " 20",
        },
        {
          name: "红米",
          num1: "1000",
          num2: "5000",
          num: " 8000000",
        },
        {
          name: "小米",
          num1: "50",
          num2: "1300",
          num: " 50000",
        },
        {
          name: "华为",
          num1: "80",
          num2: "500",
          num: " 3200",
        },
        {
          name: "苹果",
          num1: "1",
          num2: "10",
          num: " 20",
        },
        {
          name: "红米",
          num1: "1000",
          num2: "5000",
          num: " 8000000",
        },
      ],
    };
  },
  methods: {
    open2() {
      this.$message({
        message: "您已经成功退出登录！！！",
        type: "success",
      });
      localStorage.removeItem("ID");
      this.$router.push({ name: "about" });
    },
  },
  mounted() {
    //折线图
    var mylineChart = echarts.init(document.getElementById("lineChart"));
    var option = {
      title: {
        text: "近七天出货量",
        bottom: "10px",
        right: "43%",
        subtextStyle: {
          transform: `translateX(-50 %)`,
        },
      },
      tooltip: {},
      legend: {
        data: this.$store.state.mobilePhoneManufacturer,
      },
      xAxis: {
        data: this.$store.state.lastSevenDays,
      },
      yAxis: {},
      series: [
        {
          name: "小米",
          type: "line",
          data: this.$store.state.mylineChart_data.mi,
          stack: "x",
        },
        {
          name: "oppo",
          type: "line",
          data: this.$store.state.mylineChart_data.oppo,
          stack: "x",
        },
        {
          name: "华为",
          type: "line",
          data: this.$store.state.mylineChart_data.huawei,
          stack: "x",
        },
        {
          name: "vivo",
          type: "line",
          data: this.$store.state.mylineChart_data.vivo,
          stack: "x",
        },
        {
          name: "iphone",
          type: "line",
          data: this.$store.state.mylineChart_data.iphone,
          stack: "x",
        },
        {
          name: "三星",
          type: "line",
          data: this.$store.state.mylineChart_data.sansong,
          stack: "x",
        },
      ],
    };
    mylineChart.setOption(option);

    //柱状图
    var mybarChart = echarts.init(document.getElementById("barChart"));
    var option_bar = {
      legend: {},
      data: ["新增用户", "活跃用户"],
      xAxis: {
        // data: ['3-1', '3-2', '3-3', '3-4', '3-5', '3-6', '3-7']
        type: "category",
      },
      yAxis: {},
      dataset: {
        // 提供一份数据。
        source: [
          ["product", "新增用户", "活跃用户"],
          ["3-1", 43.3, 85.8],
          ["3-2", 83.1, 73.4],
          ["3-3", 86.4, 65.2],
          ["3-4", 72.4, 53.9],
          ["3-5", 72.4, 53.9],
          ["3-6", 72.4, 53.9],
          ["3-7", 72.4, 53.9],
        ],
      },
      series: [{ type: "bar" }, { type: "bar" }],
    };
    mybarChart.setOption(option_bar);

    //饼状图
    var mypieChart = echarts.init(document.getElementById("pieChart"));
    var option_pie = {
      legend: {
        orient: "vertical",
        x: "left",
        data: this.$store.state.mobilePhoneManufacturer,
      },
      title: {
        left: "center",
        top: "bottom",
        text: "最近一月销售占额",
        textStyle: {
          fontSize: 15,
        },
      },
      series: [
        {
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            show: false,
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "30",
              fontWeight: "bold",
            },
          },
          data: this.$store.state.salesProportionInThePastMonth,
        },
      ],
    };
    mypieChart.setOption(option_pie);
  },
};
</script>

<style  lang="less" scoped>
.bigbox {
  // background-color: aqua;
  height: 1000px;
  width: 1376px;
  display: flex;
  justify-content: space-around;
  align-items: start;
  flex-wrap: wrap;
}
// 左边大盒子
.leftbox {
  // background-color: rgb(30, 134, 225);
  height: 800px;
  width: 420px;
  //左上
  .leftbox1 {
    height: 300px;
    background-color: rgb(252, 252, 252);
    border-radius: 5px;

    p {
      font-size: 15px;
      font-weight: 200;
      color: rgb(196, 198, 198);
    }
    hr {
      width: 380px;
      margin-left: 10px;
    }
    .left-top {
      height: 190px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .tou {
        margin-left: 10px;
        width: 118px;
        height: 118px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .ma {
        width: 250px;
        margin-left: 50px;
        .left-b {
          div {
            // float: left;
            // margin-left: 10px;
            text-align: left;
          }
        }
      }
    }
  }
  // 左下
  .leftbox2 {
    background-color: aqua;
    height: 450px;
    margin-top: 20px;
  }
}
// 右边大盒子
.rightbox {
  // background-color: yellowgreen;
  height: 1000px;
  width: 930px;
  // 右上
  .rightbox1 {
    height: 200px;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    .minbox {
      width: 300px;
      height: 90px;
      background-color: aliceblue;
      // color: aliceblue;
      display: flex;
      justify-content: space-between;
      align-items: start;
      flex-wrap: wrap;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      .s {
        height: 90px;
        width: 200px;
        // background-color: antiquewhite;
        text-align: left;
      }
      .f {
        font-size: 25px;
        font-weight: 400;
      }
      .i {
        width: 90px;
        height: 90px;
        background-color: rgb(46, 199, 201);
        text-align: center;
        line-height: 90px;
        font-size: 45px;
        color: aliceblue;
      }
      .i2 {
        width: 90px;
        height: 90px;
        background-color: rgb(255, 185, 128);
        text-align: center;
        line-height: 90px;
        font-size: 45px;
        color: aliceblue;
      }
      .i3 {
        width: 90px;
        height: 90px;
        background-color: rgb(90, 177, 239);
        text-align: center;
        line-height: 90px;
        font-size: 45px;
        color: aliceblue;
      }
    }
  }
  // 右中
  .rightbox2 {
    margin-top: 20px;
    height: 200px;
    // background-color: rgb(61, 23, 228);
  }
  // 右下
  .rightbox3 {
    margin-top: 20px;
    height: 500px;
    // background-color: rgb(149, 255, 0);
  }
}
#lineChart {
  overflow: hidden;
  background-color: white;
  margin-top: 20px;
  border-radius: 10px;
  width: 100%;
  height: 200px;
  box-sizing: border-box;
  padding: 10px 10px 0px 10px;
}

.barChart_pieChart-box {
  overflow: hidden;
  margin-top: 20px;
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: space-between;

  & > div {
    width: 49%;
    background-color: white;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px 10px 0px 10px;
    height: 100%;
  }

  #pieChart {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px 10px 10px 10px;
  }
}
</style>